<template>
  <view class="container">
    <view class="header_txt">
      <view class="back"
            @click="backHandler">
        <image src="/static/img/back3.png"></image>
      </view>
      <view class="title"> 模考刷题 </view>
    </view>
    <view class="content">
      <view class="list_box">
        <view class="list_item">
          <!-- <view class="list_left"></view> -->
          <view class="list_right">
            <view class="list_right_l">头像</view>
            <view class="list_right_r">
              <image class="list_avatar"
                     src="../../static/image/gexx_img_mrtx@2x.png"
                     @click='modifyavatar'
                     v-if='!imasP'></image>
              <image v-else
                     class="list_avatar"
                     :src="imasP?$serverIp+imasP:'../../static/image/gexx_img_mrtx@2x.png'"
                     @click='modifyavatar'></image>
              <image class="list_r"
                     src="../../static/image/grzx_ico_jr_hui@2x.png"
                     mode=""></image>
            </view>
          </view>
        </view>
        <view class="list_item1"
              @click="goSetname">
          <!-- <view class="list_left"></view> -->
          <view class="list_right">
            <view class="list_right_l">昵称</view>
            <view class="list_right_r">
              <view class="list_tip">{{nickname}}</view>
              <image class="list_r"
                     src="../../static/image/grzx_ico_jr_hui@2x.png"
                     mode=""></image>
            </view>
          </view>
        </view>

        <view class="list_item1"
              @click="show = true"
              data-target="Modal">
          <view class="list_right1">
            <view class="list_right_l">性别</view>
            <view class="list_right_r">
              <view class="list_tip1"
                    v-if="type==1">男</view>
              <view class="list_tip1"
                    v-if="type==2">女</view>
              <image class="list_r"
                     src="../../static/image/grzx_ico_jr_hui@2x.png"
                     mode=""></image>
            </view>
          </view>
        </view>
      </view>
      <view class="list_box1">
        <view class="list_item1">
          <!-- <view class="list_left"></view> -->
          <view class="list_right"
                @click="goEdit">
            <view class="list_right_l">手机号</view>
            <view class="list_right_r">
              <view class="list_tip1">{{profileinfo.mobile}}</view>
              <image class="list_r"
                     src="../../static/image/grzx_ico_jr_hui@2x.png"
                     mode=""></image>
            </view>
          </view>
        </view>
        <view class="list_item1">
          <!-- <view class="list_left"></view> -->
          <view class="list_right1"
                @click="goEmail">
            <view class="list_right_l">邮箱地址</view>
            <view class="list_right_r">
              <view class="list_tip"
                    v-if="profileinfo.email==''">绑定邮箱</view>
              <view class="list_tip1"
                    v-else>{{profileinfo.email}}</view>
              <image class="list_r"
                     src="../../static/image/grzx_ico_jr_hui@2x.png"
                     mode=""></image>
            </view>
          </view>
        </view>
      </view>

      <template>
        <view>
          <u-action-sheet :actions="list"
                          :show="show"
                          round="30rpx"
                          cancelText="取消"
                          @close="close1"
                          :closeOnClickAction="true"
                          @select="choose"></u-action-sheet>
          <!-- <u-button @click="show = true">打开ActionSheet</u-button> -->
        </view>
      </template>
      <!-- <view class="cu-modal bottom-modal"
            :class="modalName2=='Modal'?'show':''">
        <view class="cu-dialog ">
          <view class="padding-xl new_xl">
            <view class="xl_box flexs2"
                  @click="choose(1)">
              <view>男</view>
            </view>
            <view class="xl_box flexs2"
                  @click="choose(2)">
              <view>女</view>
            </view>
            <view class="btn_kong"></view>
            <view class="xl_box flexs2"
                  @click="hideModal2">
              <view>取消</view>
            </view>
          </view>
        </view>
      </view> -->
    </view>
  </view>

</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: '男',
          fontSize: '25rpx'
        },
        {
          id: 2,
          name: '女',
          fontSize: '25rpx'
          // disabled: true
        }
      ],
      talksaveList: [],
      show: false,
      imasP: '',
      modalName2: null,
      type: 1,
      gender: 1,
      // $serverIp: this.$common.$serverIp,
      profileinfo: '',
      nickname: '请设置用户昵称',
      ID: ''
    }
  },

  onShow() {
    this._getprofileinfo()
    // console.log(4444)
  },
  methods: {
    // nickName() {
    //   this.show = true
    //   setTimeout(() => {
    //     this.show = false
    //   }, 2000)
    // },
    open() {
      // console.log('open');
    },
    close1() {
      this.show = false
      // console.log('close');
    },
    async _getprofileinfo() {
      const { data } = await this.$http.post('/user/get_user_info')
      console.log(data)
      this.profileinfo = data.data
      this.imasP = this.profileinfo.avatar
      this.nickname = this.profileinfo.nickname
      if (this.profileinfo.gender == 1) {
        this.type = 1
      } else {
        this.type = 2
      }
      this.ID = this.profileinfo.id
    },

    uploadImg() {
      return new Promise((resolve, reject) => {
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: (result) => resolve(result.tempFilePaths[0]),
          fail: (err) => reject(err)
        })
      })
    },
    uploadimage(path) {
      // console.log(777)
      const _this = this
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: _this.$serverIp + 'index.php/api/common/upload/', //仅为示例，非真实的接口地址
          filePath: path,
          name: 'file',
          formData: {
            token: uni.getStorageSync('userinfo').token
          },
          success: (uploadFileRes) => resolve(JSON.parse(uploadFileRes.data).data.url),
          fail: (err) => reject(err)
        })
      })
    },
    // 修改头像
    async modifyavatar() {
      const tempFilePaths = await this.uploadImg()
      console.log(tempFilePaths)
      const res = await this.uploadimage(tempFilePaths)
      this.talksaveList.push(res)
      // console.log(this.talksaveList)
      const { data } = await this.$http.post('/user/profile', { avatar: this.talksaveList[0] })
      console.log(data)
      if (data.code == 1) {
        uni.showToast({
          title: data.msg,
          icon: 'none',
          duration: 2000
        })
        this._getprofileinfo()
      } else {
        uni.showToast({
          title: data.msg,
          icon: 'none',
          duration: 2000
        })
      }
    },
    // 修改头像
    // async modifyavatar() {
    //   let newavatar = await this.upimg()
    //   console.log(newavatar, '没有返回值吗')
    //   const { data } = await this.$http.post('user/profile', { avatar: newavatar })
    //   console.log(data)
    //   if (data.code == 1) {
    //     uni.showToast({
    //       title: data.msg,
    //       icon: 'none',
    //       duration: 2000
    //     })
    //     this._getprofileinfo()
    //   } else {
    //     uni.showToast({
    //       title: data.msg,
    //       icon: 'none',
    //       duration: 2000
    //     })
    //   }
    // },
    goSetname() {
      uni.navigateTo({
        url: '/pages/my/nickname'
      })
    },
    async choose(obj) {
      // console.log(obj)

      // 1是男2是女
      this.type = obj.id
      const { data } = await this.$http.post('/user/profile', { gender: this.type })
      console.log(data)
      if (data.code == 1) {
        uni.showToast({
          title: data.msg,
          icon: 'none',
          duration: 2000
        })
        this._getprofileinfo()
      } else {
        uni.showToast({
          title: data.msg,
          icon: 'none',
          duration: 2000
        })
      }
      this.show = false
    },
    showModal2(e) {
      // this.show = true
      this.modalName2 = e.currentTarget.dataset.target
    },
    hideModal2(e) {
      this.modalName2 = null
    },
    goEdit() {
      uni.navigateTo({
        url: 'editPhone'
      })
    },
    goEmail() {
      uni.navigateTo({
        url: 'editMail'
      })
    },
    backHandler() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss">
.cu-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1110;
  opacity: 0;
  outline: 0;
  text-align: center;
  -ms-transform: scale(1.185);
  -webkit-transform: scale(1.185);
  transform: scale(1.185);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  pointer-events: none;
}

.cu-modal.show {
  opacity: 1;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
}
.cu-modal.bottom-modal.show {
  margin-bottom: 0;
}
.cu-modal.bottom-modal {
  margin-bottom: -500px;
}
/* 头部区域 */
.header_txt {
  width: 750rpx;
  overflow: hidden;
  height: 88rpx;
  background-color: #fff;

  .back {
    position: absolute;
    top: 14rpx;
    left: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  /* // .right {
  //   position: absolute;
  //   top: 14rpx;
  //   right: 14rpx;
  //   width: 60rpx;
  //   height: 60rpx;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  // } */

  .title {
    width: 750rpx;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-bottom: 1rpx solid #e5e5e5;
  background-color: #f5f5f5;
}
.list_box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  margin-top: 18rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
}
.list_box1 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  margin-top: 18rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
}
.list_item {
  width: 100%;
  height: 120rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list_item1 {
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list_left {
  width: 0;
  height: 100%;
}
.list_right {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f5f5f5;
}
.list_right1 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list_right_r {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list_avatar {
  width: 76rpx;
  height: 76rpx;
  border-radius: 6rpx;
  margin-right: 20rpx;
}
.list_r {
  width: 12rpx;
  height: 22rpx;
  /* margin-right: 30rpx; */
}
.list_tip {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-right: 20rpx;
}
.list_tip1 {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 20rpx;
}
.list_tip2 {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 30rpx;
}
.list_right_l {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
/* 弹框 */
.cu-dialog {
  width: 100%;
  height: 320rpx;
  background: #ffffff;
  border-radius: 30rpx 30rpx 0px 0px !important;
}
.cu_title {
  width: 100%;
  height: 100rpx;
  padding: 0rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content {
  color: #333333;
  font-size: 30rpx;
}
.cuIcon-close {
  font-weight: bold;
  font-size: 30rpx;
}
.padding-xl {
  padding: 0;
  width: 100%;
}
.new_xl {
  height: 400rpx;
  font-size: 30rpx;
  overflow-y: auto;
}
.xl_box {
  width: 100%;
  height: 100rpx;
  margin: 0 auto;
  font-size: 28rpx;
  color: #222222;
  border-bottom: 1rpx solid #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.xl_img {
  width: 30rpx;
  height: 22rpx;
}
.mobile_title {
  width: 100%;
  height: 96rpx;
  line-height: 100rpx;
}

.id_box {
  width: 100%;
  height: 84rpx;
  line-height: 74rpx;
}
.numbers {
  color: #f4ce13;
}
.button {
  width: 493rpx;
  height: 160rpx;
  line-height: 100rpx;
  background: #f4ce13;
  color: #ffffff;
  letter-spacing: 3rpx;
  margin-top: 80rpx;
}

.close_img {
  width: 30rpx;
  height: 30rpx;
  /* position: absolute;
		top:280rpx;
		left:79%; */
}
.other {
  width: 84%;
  height: 80rpx;
  margin: 0 auto;
}
.other_box {
  width: 434rpx;
  height: 136rpx;
  border: 1px solid #e6e4e4;
  margin: 0 auto;
  margin-top: 10rpx;
}
.btn_kong {
  width: 100%;
  height: 20rpx;
  background-color: #f5f5f5;
}
</style>
